<template>
	<view class="keyboard">
		<view class="left">
			<view class="colums">
				<view class="item" @tap = "keyboardinput(7)">7</view>
				<view class="item" @tap = "keyboardinput(8)">8</view>
				<view class="item" @tap = "keyboardinput(9)">9</view>
			</view>
			<view class="colums">
				<view class="item" @tap = "keyboardinput(4)">4</view>
				<view class="item" @tap = "keyboardinput(5)">5</view>
				<view class="item" @tap = "keyboardinput(6)">6</view>
			</view>
			<view class="colums">
				<view class="item" @tap = "keyboardinput(1)">1</view>
				<view class="item" @tap = "keyboardinput(2)">2</view>
				<view class="item" @tap = "keyboardinput(3)">3</view>
			</view>
			<view class="colums">
				<view class="item" @tap = "keyboardinput(0)">0</view>
				<view class="item" @tap = "keyboardinput('.')">.</view>
				<view class="item" @tap = "keyboardinput('clear')">
					<image src="../../static/images/clear.png" class="routericon"></image>
				</view>
			</view>
		</view>
		<view class="right">
			<view class="item ac" @tap = "keyboardinput('ac')">AC</view>
			<view class="item sheqian" @tap = "keyboardinput('sheqian')">整单赊账</view>
			<view class="item shouyin" @tap = "keyboardinput('shouyin')">收银</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"mykeyboard",
		data() {
			return {
				
			};
		},
		methods:{
			keyboardinput(value){
				this.$emit('keyboardevent',value)
			}
		}
	}
</script>

<style lang="scss">
.keyboard{
	display: flex;
	padding: 20rpx 20rpx 0rpx 20rpx;
	// height: 40%;
	border-top-left-radius: 16rpx;
	border-top-right-radius: 16rpx;
	height: 500rpx;
	background-color: gray;
	.left{
		flex: 8;
		display: flex;
		flex-direction: column;
		.colums{
			flex: 1;
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			.item{
				flex: 1;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				box-shadow:inset 0px 2rpx 0px 0px #97c4fe;
				background:linear-gradient(to bottom, #3d94f6 5%, #1768eb 100%);
				background-color:#3d94f6;
				border-radius:12rpx;
				border:2rpx solid #337fed;
				color:#ffffff;
				font-family:Arial;
				font-size:55rpx;
				font-weight:bold;
				text-shadow:0rpx 2rpx 0rpx #1570cd;
				.routericon{
					width: 80rpx;
					height: 80rpx;
				}
				&:active{
					position:relative;
					top:1px;
				}
			}
		}
	}
	.right{
		flex: 2;
		display: flex;
		flex-direction: column;
		height: 100%;
		.item{
			flex: 1;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			box-shadow:inset 0px 2rpx 0px 0px #97c4fe;		
			border-radius:12rpx;
			color:#ffffff;
			font-family:Arial;
			font-size:50rpx;
			font-weight:bold;
			padding:12rpx 30rpx;
			text-decoration:none;
			text-shadow:0rpx 2rpx 0rpx #1570cd;
			white-space: nowrap;
			&:active{
				position:relative;
				top:1px;
			}
			&.ac{
				background:linear-gradient(to bottom, #0F8CBD 5%, #1EB0EA 100%);
				background-color:#0F8CBD;
				border:2rpx solid #0F8CBD;
			}
			&.sheqian{
				background:linear-gradient(to bottom, #185991 5%, #3193E8 100%);
				background-color:#185991;
				border:2rpx solid #185991;
				font-size: 28rpx;
			}
			&.shouyin{
				flex: 2.5;
				background:linear-gradient(to bottom, #388A1D 5%, #59CE34 100%);
				background-color:#388A1D;
				border:2rpx solid #388A1D;
				
			}
		}
	}
}
</style>
